<template>
  <div class="product-detail-container">
    <!-- 返回按钮 -->
    <div class="back-button" @click="router.go(-1)">
      <el-icon><ArrowLeft /></el-icon>
      <span>返回</span>
    </div>
    
    <!-- 商品主要内容 -->
    <div class="product-main">
      <!-- 商品图片展示 -->
      <div class="product-gallery">
        <div class="main-image">
          <el-image 
            :src="product.coverImage" 
            :preview-src-list="[product.coverImage]" 
            fit="cover"
          />
        </div>
      </div>
      
      <!-- 商品信息 -->
      <div class="product-info">
        <h1 class="product-title">{{ product.name }}</h1>
        
        <div class="price-section">
          <span class="current-price">¥{{ product.price }}</span>
          <span class="original-price" v-if="product.originalPrice">
            ¥{{ product.originalPrice }}
          </span>
          <el-tag v-if="product.isNew" type="danger" class="new-tag">新品</el-tag>
        </div>
        
        <div class="meta-info">
          <div class="meta-item">
            <el-icon><Location /></el-icon>
            <span>{{ product.location }}</span>
          </div>
          <div class="meta-item">
            <el-icon><User /></el-icon>
            <span>{{ product.sellerName }}</span>
          </div>
          <div class="meta-item">
            <el-icon><Clock /></el-icon>
            <span>{{ formatTime(product.createTime) }}</span>
          </div>
          <div class="meta-item">
            <el-icon><View /></el-icon>
            <span>{{ product.views }}次浏览</span>
          </div>
        </div>
        
        <div class="divider"></div>
        
        <div class="product-description">
          <h3>商品描述</h3>
          <p>{{ product.description || '暂无详细描述' }}</p>
        </div>
        
        <div class="action-buttons">
          <el-button 
            type="primary" 
            size="large" 
            round 
            @click="contactSeller"
            class="contact-btn"
          >
            <el-icon><ChatDotRound /></el-icon>
            联系卖家
          </el-button>
          <el-button 
            type="danger" 
            size="large" 
            round 
            @click="addToCart"
            :disabled="product.status === 2"
          >
            <el-icon><ShoppingCart /></el-icon>
            {{ product.status === 2 ? '已售出' : '加入购物车' }}
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 商品详情 -->
    <div class="product-detail-section">
      <h3 class="section-title">商品详情</h3>
      <div class="detail-content" v-html="product.detailContent"></div>
    </div>
    
    <!-- 推荐商品 -->
    <div class="recommend-section">
      <h3 class="section-title">猜你喜欢</h3>
      <div class="recommend-list">
        <div 
          v-for="item in recommendedProducts" 
          :key="item.id" 
          class="recommend-item"
          @click="goProductDetail(item.id)"
        >
          <el-image :src="item.coverImage" fit="cover" class="recommend-image" />
          <div class="recommend-info">
            <p class="recommend-name">{{ item.name }}</p>
            <p class="recommend-price">¥{{ item.price }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  ArrowLeft, Location, User, Clock, 
  View, ChatDotRound, ShoppingCart 
} from '@element-plus/icons-vue'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const productId = route.params.id

const product = ref({
  id: '',
  name: '',
  price: 0,
  originalPrice: 0,
  coverImage: '',
  images: [],
  description: '',
  detailContent: '',
  location: '',
  sellerName: '',
  sellerAvatar: '',
  createTime: '',
  views: 0,
  status: 1, // 1-在售 2-已售
  isNew: false
})

const recommendedProducts = ref([])
const loading = ref(true)

// 格式化时间
const formatTime = (timeString) => {
  const now = new Date()
  const time = new Date(timeString)
  const diffHours = Math.floor((now - time) / (1000 * 60 * 60))
  
  if (diffHours < 1) {
    return '刚刚'
  } else if (diffHours < 24) {
    return `${diffHours}小时前`
  } else {
    return time.toLocaleDateString()
  }
}

// 获取商品详情
const fetchProductDetail = async () => {
  try {
    loading.value = true
    console.log(`正在请求商品ID: ${productId}`) // 添加日志
    const res = await axios.get(`http://localhost:3000/products/${productId}`)
    console.log('API响应:', res) // 查看响应数据
    product.value = res.data
  } catch (error) {
    console.error('获取商品详情失败:', error)
    console.error('错误详情:', error.response) // 查看错误响应
  } finally {
    loading.value = false
  }
}

// 获取推荐商品
const fetchRecommendedProducts = async () => {
  try {
    // 实际项目中替换为你的API
    const res = await axios.get('http://localhost:3000/recommendedProducts')
    recommendedProducts.value = res.data
  } catch (error) {
    console.error('获取推荐商品失败:', error)
  }
}

// 联系卖家
const contactSeller = () => {
  // 这里实现联系卖家的逻辑
  console.log('联系卖家:', product.value.sellerName)
}

// 加入购物车
const addToCart = () => {
  // 这里实现加入购物车的逻辑
  console.log('加入购物车:', product.value.id)
}

onMounted(() => {
  fetchProductDetail()
  fetchRecommendedProducts()
})
</script>

<style scoped lang="scss">
.product-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.back-button {
  display: flex;
  align-items: center;
  color: var(--el-color-primary);
  font-size: 14px;
  margin-bottom: 20px;
  cursor: pointer;
  
  .el-icon {
    margin-right: 5px;
  }
  
  &:hover {
    opacity: 0.8;
  }
}

.product-main {
  display: flex;
  gap: 40px;
  margin-bottom: 40px;
  
  @media (max-width: 768px) {
    flex-direction: column;
    gap: 20px;
  }
}

.product-gallery {
  flex: 1;
  
  .main-image {
    width: 100%;
    height: 400px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f5f5;
    
    :deep(.el-image) {
      width: 100%;
      height: 100%;
    }
    
    @media (max-width: 768px) {
      height: 300px;
    }
  }
}

.product-info {
  flex: 1;
  
  .product-title {
    font-size: 24px;
    margin-bottom: 15px;
    color: #333;
  }
  
  .price-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    
    .current-price {
      font-size: 28px;
      font-weight: bold;
      color: var(--el-color-primary);
      margin-right: 10px;
    }
    
    .original-price {
      font-size: 16px;
      color: #999;
      text-decoration: line-through;
      margin-right: 15px;
    }
    
    .new-tag {
      margin-left: 10px;
    }
  }
  
  .meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #666;
    
    .meta-item {
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 5px;
      }
    }
  }
  
  .divider {
    height: 1px;
    background-color: #eee;
    margin: 20px 0;
  }
  
  .product-description {
    margin-bottom: 30px;
    
    h3 {
      font-size: 18px;
      margin-bottom: 10px;
      color: #333;
    }
    
    p {
      line-height: 1.6;
      color: #666;
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 15px;
    
    .contact-btn {
      background-color: #4a90e2;
      border-color: #4a90e2;
    }
    
    @media (max-width: 480px) {
      flex-direction: column;
    }
  }
}

.product-detail-section {
  margin-bottom: 40px;
  
  .section-title {
    font-size: 20px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .detail-content {
    min-height: 200px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }
}

.recommend-section {
  .section-title {
    font-size: 20px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }
  
  .recommend-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 15px;
    
    .recommend-item {
      background-color: #fff;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      cursor: pointer;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
      }
      
      .recommend-image {
        width: 100%;
        height: 160px;
      }
      
      .recommend-info {
        padding: 10px;
        
        .recommend-name {
          font-size: 14px;
          margin-bottom: 5px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .recommend-price {
          font-size: 16px;
          color: var(--el-color-primary);
          font-weight: bold;
        }
      }
    }
  }
}
</style>